<template>
  <!-- python gen: Thu May 27 10:27:58 2021  -->
  <div class="yj-content">
    <div class="yj-search">
      <el-row>
        <!-- <el-form
          size="mini"
          ref="searchForm"
          :model="searchForm"
          label-width="100px"
          type="flex"
        >
        

          <el-col :sm="6">
            <el-form-item label="检查结果" prop="CHECK_RESULT">
              <el-select
                style="width: 150px"
                v-model.trim="searchForm.CHECK_RESULT"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :sm="6">
            <el-form-item>
              <el-button type="primary" @click="getList(true)">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-col>
        </el-form> -->
      </el-row>
    </div>

    <!-- 列表开始 -->
    <div class="yj-list-box">
      <div class="yj-btn-box">
        <el-button size="mini" type="primary" @click="goAdd">新增 </el-button>

        <!-- <el-button size="mini" type="primary" @click="goImport"
          >导入
        </el-button>
        <el-button size="mini" type="primary" @click="goExport"
          >导出
        </el-button> -->
      </div>
      <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          stripe
          tooltip-effect="dark"
          style="width: 100%"
          sortable="custom"
          @sort-change="handleSortChange"
          @selection-change="handleSelectionChange"
          row-key="oid"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <!-- <el-table-column type="selection" fixed align="center">
          </el-table-column> -->
          <!-- <el-table-column label="序号" width="200" fixed align="center">
            <template slot-scope="scope">
              <span>{{ (currentPage - 1) * PageSize + scope.$index + 1 }}</span>
            </template>
          </el-table-column> -->

          <!-- <el-table-column
            prop="JRXKZH"
            label="金融许可证号"
            width="150"
            show-overflow-tooltip
          >
          </el-table-column> -->

          <!-- <el-table-column
            prop="oid"
            label="编号"
            width="150"
            show-overflow-tooltip
          >
          </el-table-column> -->
          <el-table-column
            prop="name"
            label="部门名称"
            width="400"
            show-overflow-tooltip
          >
          </el-table-column>

          <el-table-column
            prop="deptSort"
            label="排序号"
            width="150"
            show-overflow-tooltip
          >
          </el-table-column>

          <!-- <el-table-column
            prop="pid"
            label="上级部门"
            width="150"
            show-overflow-tooltip
          >
          </el-table-column> -->

          <el-table-column prop="enabled" label="状态" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="enabled" v-if="scope.row.enabled == '1'">
                启用
              </span>
              <span class="not-enabled" v-else>
                停用
              </span>
            </template>
          </el-table-column>

          <el-table-column
            prop="enabled"
            label="操作"
            fixed="right"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="goUpdate(scope.row)"
                >修改
              </el-button>
              <el-button size="mini" type="primary" @click="goCopy(scope.row)"
                >cp
              </el-button>
              <el-button size="mini" type="danger" @click="goDelete(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total,  prev, pager, next, sizes"
          :total="totalCount"
          class="yj-pagination"
        >
        </el-pagination> -->
      </div>
    </div>
    <!-- 列表结束 -->

    <!-- 详细信息 开始 -->
    <el-dialog
      height="350"
      fullscreen
      title="详细信息"
      :visible.sync="dialogFormVisible"
    >
      <el-row>
        <el-form
          size="medium"
          type="flex"
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
        >
          <!-- 
          <el-col :sm="12">
          <el-form-item prop="JRXKZH" label="金融许可证号">
            <el-input
              style="width: 300px"
              v-model.trim="ruleForm.JRXKZH"
            ></el-input>
          </el-form-item>
        </el-col> -->

          <el-col :sm="12">
            <el-form-item prop="name" label="部门名称">
              <el-input
                style="width: 300px"
                v-model.trim="ruleForm.name"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :sm="12">
            <el-form-item prop="deptSort" label="排序">
              <el-input-number
                :min="0"
                style="width: 300px"
                v-model.trim="ruleForm.deptSort"
              ></el-input-number>
            </el-form-item>
          </el-col>

          <el-col :sm="12">
            <el-form-item prop="pid" label="上级部门">
              <!-- <el-input
                style="width: 300px"
                v-model.trim="ruleForm.pid"
              ></el-input> -->

              <el-select
                style="width: 300px"
                v-model.trim="ruleForm.pid"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in options"
                  :key="item.oid"
                  :label="item.name"
                  :value="item.oid"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :sm="12">
            <el-form-item prop="enabled" label="状态">
              <!-- <el-input
                style="width: 300px"
                v-model.trim="ruleForm.enabled"
              ></el-input> -->

              <!-- <el-checkbox style="width: 300px" v-model.trim="ruleForm.enabled"
                >启用</el-checkbox
              > -->

              <el-radio v-model="ruleForm.enabled" label="1">启用</el-radio>
              <el-radio v-model="ruleForm.enabled" label="0">停用</el-radio>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogFormVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="doSave">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 详细信息 结束 -->
  </div>
</template>

<script src="./sysdeptHome.js"></script>

<style scoped>
.enabled {
  background: #67c23a;
  padding: 5px;
  color: white;
  display: block;
  width: 50px;
  border-radius: 25px;
  text-align: center;
}
.not-enabled {
  background: #f56c6c;
  padding: 5px;
  color: white;
  display: block;
  width: 50px;
  border-radius: 25px;
  text-align: center;
}
</style>
